/**
 * 品牌系列页品牌系列弹框组件
 */
<script setup>
import { ref } from 'vue'
import { useSeriesStore } from '@/stores/series'

const seriesStore = useSeriesStore()

const series = ref('')

function beforeOpen() {
  series.value = ''
}

function afterClose() {
  series.value = ''
}
</script>

<template>
  <div id="series-series-popup">
    <el-dialog
      v-model="seriesStore.isShow"
      title="品牌系列"
      top="5vh"
      width="70vw"
      center
      @open="beforeOpen"
      @afterClose="afterClose"
    >
      <div class="series-select">
        <el-input
          v-model="series"
          size="large"
          placeholder="请输入品牌类型"
        ></el-input>
      </div>

      <div class="series-option">
        <TransitionGroup name="fade">
          <RouterLink
            v-for="item in seriesStore.getData()"
            :key="item"
            v-show="item.includes(series.toUpperCase())"
            :to="{ name: 'series', query: { series: item } }"
            @click="seriesStore.hidden()"
            class="series-option-item"
          >
            {{ item }}
          </RouterLink>
        </TransitionGroup>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#series-series-popup {
  --el-color-primary: green;
  --el-bg-color: rgba(45, 54, 83, 0.8);

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .series-select {
    width: 25%;
    margin-left: 1%;
    margin-bottom: 1%;
  }

  &:deep(.el-input__wrapper) {
    background-color: black;
  }

  &:deep(.el-input__inner) {
    color: #ccc;
  }

  .series-option {
    max-height: 72vh;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;

    .series-option-item {
      width: 31%;
      height: 10vh;
      margin: 1%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 2.5vh;
      font-weight: normal;
      text-align: center;
      overflow-wrap: break-word;
      background: linear-gradient(to right bottom, #2f65ba, #6e41be);
      border-radius: 2vh;
      cursor: pointer;
      transition: all 0.25s ease-in-out;

      &:hover {
        box-shadow: 0 0 10px white;
        filter: hue-rotate(15deg) saturate(200%);
      }
    }
  }

  .fade-enter-active, .fade-leave-active, .fade-move {
    transition: all 0.25s ease-in-out;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to, .fade-leave-from {
    opacity: 1;
  }

  .fade-leave-active {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>